<!DOCTYPE html>
<html lang="en-US,zh-CN">
<head>
    <meta charset="UTF-8">
    <link href="/crm-core/css/bootstrap_css_5/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="/crm-core/css/jquery_datetimepicker/jquery.datetimepicker.min.css" type="text/css" rel="stylesheet"/>
    <link href="/crm-core/css/pagination/jquery.bs_pagination.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
    <script type="text/javascript" src="/crm-core/js/bootstrap_js_5/bootstrap.bundle.js"></script>
    <script type="text/javascript" src="/crm-core/js/jquery_datetimepicker/jquery.datetimepicker.full.min.js"></script>
    <script type="text/javascript" src="/crm-core/js/bs_pagination/localization/en.js"></script>
    <script type="text/javascript" src="/crm-core/js/bs_pagination/jquery.bs_pagination.js"></script>
    <script type="text/javascript">
        $(function () {
            // 发送ajax请求，获取用户名列表，动态的生成“所有者”字段的选择栏
            $.ajax({
                url: '/crm-core/workbench/activity/getUsersName.do',
                type: "post",
                dataType: "json",
                success: function (data) {
                    data.forEach(function (item, index) {
                        $(".owner-select").append('<option value="' + item.id + '">' + item.name + '</option>');
                    });
                },
            });
            // 首次加载页面，自动调用条件查询，默认条件为第一页，每页显示10条
            queryActivityByConditions(1, 10);

            // 复选框事件,将全选框的checked属性与列表中的每一个复选框的checked属性绑定
            $("#checkAll").click(function () {
                $("#listBody input[type='checkbox']").prop("checked", this.checked);
            });
            $("#listBody").on("click", "input[type='checkbox']", function () {
                // 判断如果选中的复选框跟所有的复选框总数相同，就相当于全部选中了
                if ($("#listBody input[type='checkbox']").length === $("#listBody input[type='checkbox']:checked").length) {
                    $("#checkAll").prop("checked", true);
                } else {
                    $("#checkAll").prop("checked", false);
                }
            });

            // 给创建按钮添加单击事件
            $("#createActivityBtn").click(function () {
                // 显示创建市场活动模态窗口
                $("#createActivityModal").modal("show");
            });

            // 给修改按钮添加单击事件
            $("#editActivityBtn").click(function () {
                var checkedActivity = $("#listBody input[type='checkbox']:checked")
                // 判断选中要修改的数据必须有且只有1条
                if (checkedActivity.length <= 0) {
                    $("#alertMessage").text("请选择需要修改的内容哦！");
                    $("#alertMessageModal").modal("show");
                    return;
                }
                if (checkedActivity.length > 1) {
                    $("#alertMessage").text("每次只可以修改一条数据哦！");
                    $("#alertMessageModal").modal("show");
                    return;
                }
                var editActivityId = checkedActivity.val();
                $.ajax({
                    url: '/crm-core/workbench/activity/querySingleActivityById.do',
                    dataType: 'json',
                    type: "POST",
                    data: {
                        id: editActivityId
                    },
                    success: function (data) {
                        if (data.code === '1') {
                            $("#edit-id").val(data.others.id);
                            $("#modifyMarketActivityOwner").val(data.others.owner);
                            $("#modifyMarketActivityName").val(data.others.name);
                            $("#modifyMarketActivityStartDate").val(data.others.startDate);
                            $("#modifyMarketActivityEndDate").val(data.others.endDate);
                            $("#modifyMarketActivityCost").val(data.others.cost);
                            $("#modifyMarketActivityDescription").val(data.others.description);
                            $("#modifyActivityModal").modal("show");
                        } else {
                            $("#alertMessage").text(data.message);
                            $("#modifyErroAlert").modal("show");
                        }

                    }
                })
            });

            // 模态窗口的更新按钮添加单击事件
            $("#modifyBtn").click(function () {
                // 收集数据
                var modifyId = $("#edit-id").val();
                console.log(modifyId);
                var owner = $("#modifyMarketActivityOwner").val();
                var name = $("#modifyMarketActivityName").val();
                var startDate = $("#modifyMarketActivityStartDate").val();
                var endDate = $("#modifyMarketActivityEndDate").val();
                var cost = $("#modifyMarketActivityCost").val();
                var description = $("#modifyMarketActivityDescription").val();
                // 表单验证，这里使用Bootstrap的is-valid和is-invalid来控制表单验证的提示，而不是alert弹窗，用户体验更好
                // 判断所有者是否为空
                if (owner === "") {
                    $("#modifyMarketActivityOwner").removeClass("is-valid").addClass("is-invalid");
                    return;
                } else {
                    $("#modifyMarketActivityOwner").removeClass("is-invalid").addClass("is-valid");
                }
                // 判断活动名称是否为空
                if (name === "") {
                    $("#modifyMarketActivityName").removeClass("is-valid").addClass("is-invalid");
                    return;
                } else {
                    $("#modifyMarketActivityName").removeClass("is-invalid").addClass("is-valid");
                }
                // 如果开始时间跟结束时间都不为空，则判断结束时间是否早于开始时间
                if (startDate !== "" && endDate !== "") {
                    if (endDate < startDate) {
                        $("#modifyMarketActivityStartDate").removeClass("is-valid").addClass("is-invalid");
                        $("#modifyMarketActivityEndDate").removeClass("is-valid").addClass("is-invalid");
                        return;
                    } else {
                        $("#modifyMarketActivityStartDate").removeClass("is-invalid").addClass("is-valid");
                        $("#modifyMarketActivityEndDate").removeClass("is-invalid").addClass("is-valid");
                    }
                }
                // 判断成本，必须是非负整数，使用正则表达式的方式
                var RegExp = /^\d+$/;
                if (!RegExp.test(cost)) {
                    $("#modifyMarketActivityCost").removeClass("is-valid").addClass("is-invalid");
                    return;
                } else {
                    $("#modifyMarketActivityCost").removeClass("is-invalid").addClass("is-valid");
                }
                // 发送ajax请求，传递数据至Controller
                $.ajax({
                    url: '/crm-core/workbench/activity/modifyActivityById.do',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id: modifyId,
                        owner: owner,
                        name: name,
                        startDate: startDate,
                        endDate: endDate,
                        cost: cost,
                        description: description
                    },
                    success: function (data) {
                        var modifyActivityModalObj = $("#modifyActivityModal");
                        if (data.code === "1") {
                            modifyActivityModalObj.modal("hide");
                            // 刷新市场活动的列表
                            queryActivityByConditions($("#paginationAria").bs_pagination("getOption", "currentPage"), $("#paginationAria").bs_pagination("getOption", "rowsPerPage"));
                        } else if (data.code === "0") {
                            $("#modifyErroMessage").text(data.message);
                            $("#modifyErroAlert").addClass("show");
                        }
                        // 清空表单的数据，防止重复创建的时候，上次的数据还在
                        modifyActivityModalObj.find('form').trigger('reset');
                        modifyActivityModalObj.find('input').removeClass('is-valid');
                        modifyActivityModalObj.find('select').removeClass('is-valid');
                        // 控制保存失败后的警告弹窗的显示与展示
                        $("#closeModifyAlert").click();
                    }
                });
            });

            // 控制保存失败后的警告弹窗的显示与展示
            $("#closeModifyAlert").click(function () {
                $("#modifyErroAlert").removeClass("show");
            });
            // 添加保存市场活动模态窗口的提交按钮功能
            $("#createCommitBtn").click(function () {
                // 收集数据
                var owner = $("#create-marketActivityOwner").val();
                var name = $("#create-marketActivityName").val();
                var startDate = $("#create-marketActivityStartDate").val();
                var endDate = $("#create-marketActivityEndDate").val();
                var cost = $("#create-marketActivityMoney").val();
                var description = $("#create-marketActivityDescription").val();
                // 表单验证，这里使用Bootstrap的is-valid和is-invalid来控制表单验证的提示，而不是alert弹窗，用户体验更好
                // 判断所有者是否为空
                if (owner === "") {
                    $("#create-marketActivityOwner").removeClass("is-valid").addClass("is-invalid");
                    return;
                } else {
                    $("#create-marketActivityOwner").removeClass("is-invalid").addClass("is-valid");
                }
                // 判断活动名称是否为空
                if (name === "") {
                    $("#create-marketActivityName").removeClass("is-valid").addClass("is-invalid");
                    return;
                } else {
                    $("#create-marketActivityName").removeClass("is-invalid").addClass("is-valid");
                }
                // 如果开始时间跟结束时间都不为空，则判断结束时间是否早于开始时间
                if (startDate !== "" && endDate !== "") {
                    if (endDate < startDate) {
                        $("#create-marketActivityStartDate").removeClass("is-valid").addClass("is-invalid");
                        $("#create-marketActivityEndDate").removeClass("is-valid").addClass("is-invalid");
                        return;
                    } else {
                        $("#create-marketActivityStartDate").removeClass("is-invalid").addClass("is-valid");
                        $("#create-marketActivityEndDate").removeClass("is-invalid").addClass("is-valid");
                    }
                }
                // 判断成本，必须是非负整数，使用正则表达式的方式
                var RegExp = /^\d+$/;
                if (!RegExp.test(cost)) {
                    $("#create-marketActivityMoney").removeClass("is-valid").addClass("is-invalid");
                    return;
                } else {
                    $("#create-marketActivityMoney").removeClass("is-invalid").addClass("is-valid");
                }
                // 发送ajax请求，传递数据至Controller
                $.ajax({
                    url: '/crm-core/workbench/activity/createActivity.do',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        owner: owner,
                        name: name,
                        startDate: startDate,
                        endDate: endDate,
                        cost: cost,
                        description: description
                    },
                    success: function (data) {
                        if (data.code === "1") {
                            $("#createActivityModal").modal("hide");
                            // 刷新市场活动的列表
                            queryActivityByConditions(1, $("#paginationAria").bs_pagination("getOption", "rowsPerPage"));
                        } else if (data.code === "0") {
                            $("#createErroMessage").text(data.message);
                            $("#create-erroAlert").addClass("show");
                        }
                    }
                });
                // 清空表单的数据，防止重复创建的时候，上次的数据还在
                console.log()
                $("#create-form input").val("");
                $("#create-form select").val("");
                $("#create-form textarea").val("");
                $('#createActivityModal').find('input').removeClass('is-valid');
                $('#createActivityModal').find('select').removeClass('is-valid');

                // 控制保存失败后的警告弹窗的显示与展示
                $("#closeCreateAlert").click();
            });
            // 控制保存失败后的警告弹窗的显示与展示
            $("#closeCreateAlert").click(function () {
                $("#create-erroAlert").removeClass("show");
            });
            // 给查询按钮绑定事件，当点击查询按钮时，执行查询
            $("#searchBtn").click(function () {
                queryActivityByConditions(1, $("#paginationAria").bs_pagination("getOption", "rowsPerPage"));
            });
            // 给报错弹窗的确认按钮绑定单击事件
            $("#IknowBtn").click(function () {
                $("#alertMessage").text('');
                $("#alertMessageModal").modal("hide");
            });
            // 定义在外面
            let checkedActivities;
            let checkedActivitiesIdArray = [];
            // 给删除按钮绑定事件
            $("#deleteActivitiesBtn").on("click", function () {
                checkedActivities = $("#listBody input[type='checkbox']:checked");
                if (checkedActivities.length <= 0) {
                    $("#alertMessage").text("至少选择一条记录才可以删除哦！");
                    $("#alertMessageModal").modal("show");
                    return;
                }
                const confirmMessage = "您确定要删除选中的 " + checkedActivities.length + " 条数据吗？";
                $("#confirmMessage").text(confirmMessage);

                $("#deleteActivityConfirmModal").modal("show");
            });
            // 给删除确认按钮添加事件
            $("#deleteConfirmBtn").on("click", function () {
                // 定义一个数组，遍历选中的复选框，将其value值装入数组中
                checkedActivities.each(function () {
                    checkedActivitiesIdArray.push(this.value);
                });
                console.log(checkedActivitiesIdArray);
                if (checkedActivities.length === checkedActivitiesIdArray.length) {
                    // 用户确认删除，发送ajax请求
                    $.ajax({
                        url: "/crm-core/workbench/activity/deleteActivitiesByIdArray.do",
                        type: "POST",
                        contentType: 'application/json',
                        data: JSON.stringify(checkedActivitiesIdArray),
                        success: function (data) {
                            console.log("ajax发送后的数组" + checkedActivitiesIdArray);
                            if (data.code === "1") {
                                checkedActivitiesIdArray = [];
                                // 刷新市场活动的列表
                                $("#searchBtn").click();
                                $("#confirmMessage").text("");
                                $("#deleteActivityConfirmModal").modal("hide");
                            } else {
                                $("#alertMessage").text(data.message);
                                $("#alertMessageModal").modal("show");
                            }
                        }

                    });
                } else {
                    console.log("请求发送有问题！")
                }

            });
            // 给导出所有市场活动按钮绑定事件
            $("#downloadAllActivitiesBtn").click(function () {
                window.location.href = "/crm-core/workbench/activity/downloadAllActivity.do";
            });
            // 给导入按钮绑定单击事件
            $("#importActivitiesBtn").click(function () {
                const importModal = $("#importActivityModal");
                importModal.modal("show");
            });
            // 给导出选中的市场活动按钮绑定事件
            $("#downloadSelectedActivitiesBtn").click(function () {
                checkedActivities = $("#listBody input[type='checkbox']:checked");
                if (checkedActivities.length <= 0) {
                    $("#alertMessage").text("至少选择一条记录才可以导出哦！");
                    $("#alertMessageModal").modal("show");
                    return;
                }
                let urlString = "/crm-core/workbench/activity/downloadSelectedActivities.do?";
                // 遍历对象列表，拼接字符串
                checkedActivities.each(function (id, index) {
                    urlString += "id=" + encodeURIComponent(this.value) + "&";
                });
                // 去掉尾部的“&”
                urlString = urlString.slice(0, -1);
                window.location.href = urlString;
            });


            // datetimepicker控件设置
            $(function () {
                //使用中文模式
                $.datetimepicker.setLocale('zh');
                $(".date-picker").datetimepicker({
                    clearBtn: true,
                    lazyInit: true,
                    timepicker: false,
                    format: 'Y-m-d',
                    // 设置日期只能在今日之后
                    minDate: 0,

                });

                // 绑定input标签后面的清空按钮
                $("button[name='clearDate']").click(function () {
                    const relatedInput = $(this).prev(".date-picker");
                    relatedInput.val("");
                });
            });

            // 封装条件查询功能
            function queryActivityByConditions(pageNo, pageSize) {
                // 当用户点击市场活动导航栏是，首次加载市场活动页面，发送ajax请求，以默认条件查询所有列表并分页显示到页面上
                // 获取数据
                const name = $("#queryName").val();
                const owner = $("#queryOwner").val();
                const startDate = $("#queryStartDate").val();
                const endDate = $("#queryEndDate").val();
                $.ajax({
                    url: "/crm-core/workbench/activity/showActivityListByCondition.do",
                    type: "post",
                    dataType: "json",
                    data: {
                        name: name,
                        owner: owner,
                        startDate: startDate,
                        endDate: endDate,
                        pageNo: pageNo,
                        pageSize: pageSize
                    },
                    success: function (data) {
                        // 显示总条数先
                        $("#pagesCount").text(data.activityCount);
                        // 遍历结果，渲染表格页面
                        let htmlStr = "";
                        $.each(data.activityList, function (index, item) {
                            htmlStr += "<tr>";
                            htmlStr += "<th scope=\"row\">";
                            htmlStr += "<input class=\"form-check-input\" type=\"checkbox\" value=\"" + item.id + "\" aria-label=\"Checkbox for following text input\">";
                            htmlStr += "</th>";
                            htmlStr += "<td><a class=\"text-decoration-none\" href=\"/crm-core/workbench/activity/activityDetail.do?activityId="+item.id+"\">" + item.name + "</a></td>";
                            htmlStr += "<td>" + item.owner + "</td>";
                            htmlStr += "<td>" + item.startDate + "</td>";
                            htmlStr += "<td>" + item.endDate + "</td>";
                            htmlStr += "<td>" + item.createTime + "</td>";
                            htmlStr += "<td>" + item.createBy + "</td>";
                            htmlStr += "</tr>";
                        });
                        $("#listBody").html(htmlStr);
                        $("#checkAll").prop("checked", false);
                        const totalPages = Math.ceil(data.activityCount / pageSize);
                        //console.log(totalPage);
                        // 加载分页插件
                        $(function () {
                            $("#paginationAria").bs_pagination({
                                showRowsInfo: false,
                                currentPage: pageNo,
                                totalRows: data.activityCount,
                                rowsPerPage: pageSize,
                                totalPages: totalPages,
                                onChangePage: function (event, pageObj) {
                                    queryActivityByConditions(pageObj.currentPage, pageObj.rowsPerPage);
                                }
                            });
                        });
                    },
                });
            }
            // 给下载模板按钮绑定事件
            $("#downloadTemplateBtn").click(function () {
                window.location.href = "/crm-core/workbench/activity/downloadActivityTemplate.do";
            });
            // 给上传文件按钮绑定事件
            $("#importActivityBtn").click(function (){
                const fileObj = $("#importActivitiesFile");
                const fileName = fileObj.val();
                const suffix = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
                const fileInput = fileObj[0];
                const file = fileInput.files[0];
                if(!file){
                    $("#alertMessage").text("请选择要导入的文件");
                    $("#alertMessageModal").modal("show");
                    return;
                }
                if(file.size >= 1024*1024*5){
                    $("#alertMessage").text("文件大小不能超过5Mb");
                    $("#alertMessageModal").modal("show");
                    return;
                }
                if(suffix === ".xls" || suffix === ".xlsx"){
                    const formData = new FormData();
                    formData.append('ActivitiesFile', file);
                    $.ajax({
                        url: '/crm-core/workbench/activity/importActivities.do',
                        type: 'POST',
                        data: formData,
                        processData: false, // 告诉jQuery不要去处理发送的数据
                        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                        success: function(response) {
                            console.log('上传成功');
                            if(response.code === "1"){
                                const importModal = $("#importActivityModal");
                                importModal.modal("hide");
                                queryActivityByConditions(1, $("#paginationAria").bs_pagination("getOption", "rowsPerPage"));
                            }else{
                                $("#alertMessage").text(response.message);
                                $("#alertMessageModal").modal("show");
                            }

                        },
                        error: function(xhr, status, error) {
                            console.error('上传失败');
                        },
                        // 监听文件上传的结果，如果上传成功，则刷新
                        xhr: function() {
                            const myXhr = $.ajaxSettings.xhr();
                            const progress_bar = $('#progress-bar');
                            if (myXhr.upload) {
                                myXhr.upload.addEventListener('progress', function(e) {
                                    if (e.lengthComputable) {
                                        const uploadSuccessInfo = $("#uploadSuccessInfo");
                                        uploadSuccessInfo.hide();
                                        // `e`是包含进度信息的事件对象
                                        const percent = (e.loaded * 100) / e.total; // 计算百分比
                                        if(percent === 100){
                                            uploadSuccessInfo.show();
                                        }
                                        // 更新进度条
                                        progress_bar.width(percent + '%'); // 假设你有一个ID为progress-bar的进度条元素
                                        progress_bar.text(percent + '%'); // 更新进度条上的文本
                                        //console.log(percentComplete + '% 上传完成');
                                    }
                                }, false);
                            }
                            return myXhr;
                        }
                    });
                }else {
                    $("#alertMessage").text("仅支持.xls和.xlsx文件导入，请核对文件格式");
                    $("#alertMessageModal").modal("show");
                }

            });
        });
    </script>
    <style>
        .text-before .text-after {
            display: inline-block;

        }
    </style>
    <title>市场活动</title>
</head>
<body>
<div class="container-fluid" style="position:fixed;">
    <!-- 页面标题 -->
    <div class="row">
        <div class="col-12">
            <h3 class="text-muted">市场活动列表</h3>
            <hr/>
        </div>
    </div>
    <div class="row input-group">
        <!-- 查询栏 -->
        <div class="col-3">
            <div class="input-group mb-3">
                <span class="input-group-text">名称</span>
                <input type="text" class="form-control form-control-sm" placeholder="活动名称" aria-label="Username"
                       id="queryName"/>
            </div>
        </div>
        <div class="col-2">
            <div class="input-group mb-3">
                <span class="input-group-text">所有者</span>
                <input type="text" class="form-control form-control-sm" placeholder="所有者" aria-label="Owner"
                       id="queryOwner"/>
            </div>
        </div>
        <div class="col-3">
            <div class="input-group mb-3">
                <span class="input-group-text">开始时间</span>
                <input id="queryStartDate" type="text" class="form-control form-control-sm date-picker"
                       aria-label="startDate" readonly/>
                <button class="btn btn-sm btn-light" type="button" name="clearDate">
                    <img src="/crm-core/image/icons/arrow-clockwise.svg" alt=""/>
                </button>
            </div>
        </div>
        <div class="col-3">
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">结束时间</span>
                <input id="queryEndDate" type="text" class="form-control form-control-sm date-picker"
                       aria-label="endDate" readonly/>
                <button class="btn btn-sm btn-light" type="button" name="clearDate">
                    <img src="/crm-core/image/icons/arrow-clockwise.svg" alt=""/>
                </button>
            </div>
        </div>

        <div class="col-1">
            <button class="btn btn-primary" type="button" id="searchBtn">查询</button>
        </div>
    </div>

    <div class="row bg-light shadow-sm">
        <div class="col-4">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-success" id="createActivityBtn">创建</button>
                <button type="button" class="btn btn-warning" id="editActivityBtn">修改</button>
                <button type="button" class="btn btn-danger" id="deleteActivitiesBtn">删除</button>
            </div>

        </div>
        <div class="col-8">
            <button type="button" class="btn btn-outline-info" id="importActivitiesBtn">导入列表数据</button>
            <button type="button" class="btn btn-outline-info" id="downloadAllActivitiesBtn">批量导出列表数据</button>
            <button type="button" class="btn btn-outline-info" id="downloadSelectedActivitiesBtn">选择导出列表数据
            </button>
            <!--测试隐藏表单提交数据-->
            <form id="selectedActivitiesForm" action="/crm-core/workbench/activity/downloadSelectedActivities.do"
                  method="POST" style="display:none;">
                <!-- 这里添加隐藏的输入字段 -->
            </form>
        </div>
    </div>
    <div class="row align-items-center">
        <div class="col-12" style="overflow: auto; height: 500px">
            <table class="table table-striped table-hover">
                <thead>
                <tr style="position:sticky;top: 0;background: #ffffff">
                    <th scope="col">
                        <label for="checkAll"></label><input class="form-check-input" type="checkbox" id="checkAll">
                    </th>
                    <th scope="col">活动名称</th>
                    <th scope="col">所有者</th>
                    <th scope="col">开始日期</th>
                    <th scope="col">结束日期</th>
                    <th scope="col">创建日期</th>
                    <th scope="col">创建人</th>
                </tr>
                </thead>
                <tbody id="listBody">
                </tbody>
            </table>
        </div>
    </div>
    <div class="row justify-content-between align-items-center no-gutters">
        <div class="col-2">
            <button type="button" class="btn btn-sm btn-default">
                <span class="text-sm-center">共-<b id="pagesCount"></b>-条</span>
            </button>
        </div>
        <div class="col-10">
            <div id="paginationAria"></div>
        </div>
    </div>
</div>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="document" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="container modal-content" style="width: auto">
            <div class="row mb-2 align-items-center">
                <div class="modal-header">
                    <div class="col-11">
                        <h5 class="modal-title text-muted">创建市场活动</h5>
                    </div>
                    <div class="col-1">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
            </div>
            <div class="modal-body" id="create-form">
                <div class="row mb-2 align-items-center">
                    <div class="col-6">
                        <label for="create-marketActivityOwner" class="form-label">所有者：<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <select class="form-select owner-select" id="create-marketActivityOwner" required>
                            <option value="">请选择</option>
                        </select>
                        <div class="valid-feedback">所有者输入正确</div>
                        <div class="invalid-feedback">所有者不能为空，请选择！</div>
                    </div>
                    <div class="col-6">
                        <label for="create-marketActivityName" class="form-label">活动名称：<span
                                style="font-size: 15px; color: red;">*</span>
                        </label>
                        <input type="text" class="form-control" id="create-marketActivityName" required>
                        <div class="valid-feedback">活动名称输入正确</div>
                        <div class="invalid-feedback">活动名称不能为空，请输入！</div>
                    </div>
                </div>
                <div class="row mb-2 align-items-center">
                    <div class="col-6">
                        <label for="create-marketActivityStartDate" class="form-label">开始时间：</label>
                        <div class="input-group">
                            <input type="text" class="form-control date-picker"
                                   id="create-marketActivityStartDate" readonly>
                            <button class="btn btn-sm btn-light" type="button" name="clearDate">
                                <img src="/crm-core/image/icons/arrow-clockwise.svg" alt=""></img>
                            </button>
                            <div class="invalid-feedback">活动开始时间不得晚于结束时间！</div>
                            <div class="valid-feedback">活动结束时间符合要求</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <label for="create-marketActivityEndDate" class="form-label">结束时间：</label>
                        <div class="input-group">
                            <input type="text" class="form-control date-picker"
                                   id="create-marketActivityEndDate" readonly>
                            <button class="btn btn-sm btn-light" type="button" name="clearDate">
                                <img src="/crm-core/image/icons/arrow-clockwise.svg" alt=""></img>
                            </button>
                            <div class="invalid-feedback">活动结束时间不得早于开始时间！</div>
                            <div class="valid-feedback">活动结束时间符合要求</div>
                        </div>
                    </div>
                </div>
                <div class="row mb-2 align-items-center">
                    <div class="col-6">
                        <label for="create-marketActivityMoney" class="form-label">成本预算(￥)：</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="create-marketActivityMoney">
                            <span class="input-group-text">元</span>
                            <div class="invalid-feedback">成本预算必须是非负整数！</div>
                            <div class="valid-feedback">成本预算符合要求</div>
                        </div>
                    </div>
                </div>
                <div class="row mb-2 alingn-items-center">
                    <div class="col">
                        <label for="create-marketActivityDescription" class="form-label">活动描述：</label>
                        <textarea class="form-control" id="create-marketActivityDescription"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div id="create-erroAlert" class="alert alert-danger alert-dismissible fade" role="alert">
                    <strong>哎呀呀！</strong> <span id="createErroMessage"></span>
                    <button type="button" class="close" id="closeCreateAlert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="createCommitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="modifyActivityModal" role="document" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="container modal-content" style="width: auto">
            <div class="row mb-2 align-items-center">
                <div class="modal-header">
                    <div class="col-11">
                        <h5 class="modal-title text-muted">修改市场活动</h5>
                    </div>
                    <input type="hidden" id="edit-id">
                    <div class="col-1">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
            </div>
            <div class="modal-body" id="modify-form">
                <div class="row mb-2 align-items-center">
                    <div class="col-6">
                        <label for="modifyMarketActivityOwner" class="form-label">所有者：<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <select class="form-select owner-select" id="modifyMarketActivityOwner" required>
                            <option value="">请选择</option>
                        </select>
                        <div class="valid-feedback">所有者输入正确</div>
                        <div class="invalid-feedback">所有者不能为空，请选择！</div>
                    </div>
                    <div class="col-6">
                        <label for="modifyMarketActivityName" class="form-label">活动名称：<span
                                style="font-size: 15px; color: red;">*</span>
                        </label>
                        <input type="text" class="form-control" id="modifyMarketActivityName" required>
                        <div class="valid-feedback">活动名称输入正确</div>
                        <div class="invalid-feedback">活动名称不能为空，请输入！</div>
                    </div>
                </div>
                <div class="row mb-2 align-items-center">
                    <div class="col-6">
                        <label for="modifyMarketActivityStartDate" class="form-label">开始时间：</label>
                        <div class="input-group">
                            <input type="text" class="form-control date-picker"
                                   id="modifyMarketActivityStartDate" readonly>
                            <button class="btn btn-sm btn-light" type="button" name="clearDate">
                                <img src="/crm-core/image/icons/arrow-clockwise.svg" alt=""></img>
                            </button>
                            <div class="invalid-feedback">活动开始时间不得晚于结束时间！</div>
                            <div class="valid-feedback">活动结束时间符合要求</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <label for="modifyMarketActivityEndDate" class="form-label">结束时间：</label>
                        <div class="input-group">
                            <input type="text" class="form-control date-picker"
                                   id="modifyMarketActivityEndDate" readonly>
                            <button class="btn btn-sm btn-light" type="button" name="clearDate">
                                <img src="/crm-core/image/icons/arrow-clockwise.svg" alt=""></img>
                            </button>
                            <div class="invalid-feedback">活动结束时间不得早于开始时间！</div>
                            <div class="valid-feedback">活动结束时间符合要求</div>
                        </div>
                    </div>
                </div>
                <div class="row mb-2 align-items-center">
                    <div class="col-6">
                        <label for="modifyMarketActivityCost" class="form-label">成本预算(￥)：</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="modifyMarketActivityCost">
                            <span class="input-group-text">元</span>
                            <div class="invalid-feedback">成本预算必须是非负整数！</div>
                            <div class="valid-feedback">成本预算符合要求</div>
                        </div>
                    </div>
                </div>
                <div class="row mb-2 alingn-items-center">
                    <div class="col">
                        <label for="modifyMarketActivityDescription" class="form-label">活动描述：</label>
                        <textarea class="form-control" id="modifyMarketActivityDescription"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div id="modifyErroAlert" class="alert alert-danger alert-dismissible fade" role="alert">
                    <strong>哎呀呀！</strong> <span id="modifyErroMessage"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="modifyBtn">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 删除市场活动 -->
<div class="modal fade" id="deleteActivityConfirmModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">删除市场活动</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="deleteConfirmBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>
<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="document" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="container-fluid modal-content" style="width: auto">
            <div class="row md-2">
                <div class="modal-header">
                    <div class="col-11">
                        <h5 class="modal-title text-muted">导入市场活动</h5>
                    </div>
                    <div class="col-1">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
            </div>
            <div class="modal-body">
                <div class="row md-2">
                    <div class="col-6 border-end">
                        <div class="input-group">
                            <input type="file" class="form-control" id="importActivitiesFile"
                                   aria-describedby="inputGroupFileAddon04" aria-label="Upload">
                            <button class="btn btn-outline-secondary" type="button" id="downloadTemplateBtn">下载模板
                            </button>
                        </div>
                        <div class="mt-3 ml-3">
                        <p class="fs-6 fw-medium">上传进度:</p>
                        </div>
                        <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar bg-success" id="progress-bar" ></div>
                        </div>
                        <div class="mt-1" id="uploadSuccessInfo" style="display: none">
                        <span class="fs-6 fw-medium">上传成功，系统正在解析，请稍候</span>
                        <div class="spinner-border text-success mt-3" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <h3>重要提示</h3>
                        <ul>
                            <li>只支持上传后缀名为.xls或.xlsx的文件。</li>
                            <li>请先下载上传模板，在模板中填写内容。</li>
                            <li>请确认您的文件大小不超过5MB。</li>
                            <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                            <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                            <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                            <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row md-2">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--尝试通过模态窗口来代替本页面中的alert，操作起来更加舒适-->
<div class="modal" tabindex="-1" id="alertMessageModal">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><img src="/crm-core/image/icons/exclamation-circle-fill.svg" alt=""> 警告</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-danger font-weight-bold text-sm-left" id="alertMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-primary" id="IknowBtn">知道了</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>